<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            var vmodel = avalon.define("test", function(vm) {
                vm.first = {
                }
            })
            setTimeout(function() {
                var a = {
                    array: ["@@@", "###", "$$$", "%%%"],
                    text: "<span style='color:red;'>再次赋值</span>",
                    object: {
                        grape: "葡萄",
                        coconut: "椰子",
                        pitaya: "火龙果",
                        orange: "橙子"
                    }
                }
                vmodel.first = a
            }, 3000)
        </script>
    </head>
    <body ms-controller="test">
        <p>最初只是一个空对象，然后整个被重写</p>
        <fieldset>
            <legend>ms-repeat</legend>
            <table width="100%">
                <tr>
                    <td>
                        <ul>
                            <li ms-repeat="first.array">{{el}}</li>
                        </ul>
                    </td>
                    <td>
                        <ol>
                            <li ms-repeat="first.object">{{$key}}: {{$val}}</li> 
                        </ol>
                    </td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>ms-each</legend>
            <ul ms-each="first.array">
                <li>{{el}}</li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>ms-with</legend>
            <ul ms-with="first.object">
                <li>{{$key}}: {{$val}}</li>
            </ul>
        </fieldset>
    </body>
</html>
